<template>
  <el-dialog class :title="'推送筛选'" :visible.sync="dialogVisible" :close-on-click-modal="false" width="960px">
    <div class="form-box" v-loading="loading">

      <div class="tip">
        提示：在本页面配置条件后，接口推送时只推送满足条件的商品。不设置则推送所有商品。
      </div>
      <el-form :ref="'form'" :model="form" :inline="true" :rules="rules" label-width="auto" class="demo-ruleForm">
        <el-form-item label="系统" prop="systemIdList" v-if="GameSelectedType === 0">
          <el-select v-model="form.systemIdList" placeholder="请选择" clearable multiple collapse-tags>
            <el-option v-for="dict in sysList" :key="dict.id" :label="dict.fieldName" :value="dict.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="运营商" prop="carrierIdList" v-if="GameSelectedType === 0">
          <el-select v-model="form.carrierIdList" placeholder="请选择" clearable multiple collapse-tags>
            <el-option v-for="dict in carrierList" :key="dict.id" :label="dict.fieldName" :value="dict.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="大区" prop="groupIdList" v-if="GameSelectedType === 1">
          <el-select v-model="form.groupIdList" placeholder="请选择" clearable multiple collapse-tags>
            <el-option v-for="dict in areaList" :key="dict.id" :label="dict.fieldName" :value="dict.id" />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="服务器" prop="serverId">
            <el-select v-model="form.serverId" placeholder="请选择" clearable >
              <el-option v-for="dict in serverList" :key="dict.id" :label="dict.fieldName" :value="dict.id" />
            </el-select>
          </el-form-item> -->

        <el-form-item label="价格区间" prop="price" class="mm-b-8">
          <div class="two-input-content">
            <el-input v-model="form.priceStart" class="two-input-item" style="width:105px !important"></el-input>
            <span>-</span>
            <el-input v-model="form.priceEnd" class="two-input-item" style="width:105px !important"></el-input>
          </div>
        </el-form-item>
        <div v-if="attrs && attrs.length">
          <span v-for="custom in attrs" :key="custom.id">
            <div v-if="custom.fieldType == 'checkbox'"></div>
            <el-form-item :label="custom.fieldName" :prop="custom.aavName" v-if="custom.isEnable === '0'&&custom.isSearch == '1'">
              <!-- <el-input v-model="form[custom.aavName]" :placeholder="`请填写${custom.fieldName}`"
                    v-if="custom.fieldType == 'input'" :id="custom.aavName"/> -->
              <div v-if="custom.fieldType == 'number'" class="number-input">
                <el-input-number v-model="form[custom.aavName+'start']" :step="0.1" :max="99999" :controls="false" style="text-align: left;width: 100px!important;" :placeholder="`请填写`" :id="custom.aavName"></el-input-number>
                <span> - </span>
                <el-input-number v-model="form[custom.aavName+'end']" :step="0.1" :max="99999" :controls="false" style="text-align: left;" :placeholder="`请填写`"></el-input-number>
              </div>
              <!-- <el-date-picker :id="custom.aavName" v-model="form[custom.aavName+'temp']" type="datetimerange" :placeholder="`请选择${custom.fieldName}`"
                    value-format="yyyy-MM-dd hh:mm:ss" v-if="custom.fieldType == 'date'" @change="dateChange($event,custom.aavName)">
                  </el-date-picker> -->

              <!-- <el-checkbox-group :id="custom.aavName" v-model="form[custom.aavName+'rander']" v-if="custom.fieldType == 'checkbox'" @change="checkboxChange($event,custom.aavName)">
                    <el-checkbox :label="checkItem.id" v-for="checkItem in custom.childAttributes" :value="checkItem.id"
                      :key="checkItem.id">{{ checkItem.fieldName }}</el-checkbox>
                  </el-checkbox-group> -->

              <el-select :id="custom.aavName" v-model="form[custom.aavName+'rander']" placeholder="请选择" multiple v-if="custom.fieldType == 'radio'">
                <el-option v-for="item in custom.childAttributes" :key="item.id" :label="item.fieldName" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <div v-if="custom.fieldType == 'checkbox'"></div>
          </span>
        </div>
        <!-- <div v-if="attrs && attrs.length">
              <span v-for="custom in attrs" :key="custom.id">
                <div v-if="custom.fieldType == 'checkbox'"></div>
                <el-form-item :label="custom.fieldName" :prop="custom.aavName" v-if="custom.isEnable === '0'&&custom.isSearch == '1'">
                  <el-input v-model="form[custom.aavName]" :placeholder="`请填写${custom.fieldName}`"
                    v-if="custom.fieldType == 'input'" :id="custom.aavName"/>
                  <div v-if="custom.fieldType == 'number'" class="number-input">
                    <el-input-number v-model="form[custom.aavName+'start']"  :step="0.1" :max="99999" :controls="false"
                    style="text-align: left;width: 100px!important;" :placeholder="`请填写`" :id="custom.aavName"
                    ></el-input-number>
                    <span> - </span>
                    <el-input-number v-model="form[custom.aavName+'end']" :step="0.1" :max="99999" :controls="false"
                    style="text-align: left;" :placeholder="`请填写`"
                    ></el-input-number>
                  </div>
                  <el-date-picker :id="custom.aavName" v-model="form[custom.aavName+'temp']" type="datetimerange" :placeholder="`请选择${custom.fieldName}`"
                    value-format="yyyy-MM-dd hh:mm:ss" v-if="custom.fieldType == 'date'" @change="dateChange($event,custom.aavName)">
                  </el-date-picker>

                  <el-checkbox-group :id="custom.aavName" v-model="form[custom.aavName+'rander']" v-if="custom.fieldType == 'checkbox'" @change="checkboxChange($event,custom.aavName)">
                    <el-checkbox :label="checkItem.id" v-for="checkItem in custom.childAttributes" :value="checkItem.id"
                      :key="checkItem.id">{{ checkItem.fieldName }}</el-checkbox>
                  </el-checkbox-group>


                  <el-select :id="custom.aavName" v-model="form[custom.aavName]" placeholder="请选择" v-if="custom.fieldType == 'radio'">
                    <el-option v-for="item in custom.childAttributes" :key="item.id" :label="item.fieldName" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
                <div v-if="custom.fieldType == 'checkbox'"></div>
              </span>
            </div> -->
        <div style="height: 30px;"></div>
        <div class="center">
          <el-button @click="close()">取消</el-button>
          <el-button type="primary" @click="submitForm('form')" v-loading="loading">确认</el-button>
        </div>
      </el-form>

    </div>

  </el-dialog>
</template>

<script>
import gameConfigApi from "@/api/gameConfig";
// import goodsListApi from "../../../api/gameConfig/goodsList";
import gameListApi from "@/api/gameConfig/gameList";
import gameDictionaryApi from "@/api/gameConfig/gameDictionary";
export default {
  name: "moreSearch",
  components: {},
  data() {
    return {
      dialogVisible: false,
      loading: false,
      gameList: [],
      // 表单参数
      form: {
        type: "",
        systemIdList: [],
        carrierIdList: [],
        groupIdList: [],
        priceStart: "",
        priceEnd: "",
      },

      gameId: "",
      attrs: [],
      rules: {},
      actived: "",
      GameSelectedType: "",
      sysList: [],
      carrierList: [], //运营商列表
      areaList: [], //大区列表
      serverList: [], //服务器列表
      config: "", //已配置的数据，回显用
    };
  },
  methods: {
    // 打开弹窗
    async open(gameId, config) {
      this.config = "";
      if (config) this.config = config;
      this.dialogVisible = true;
      this.form = {
        type: "",
        systemIdList: [],
        carrierIdList: [],
        groupIdList: [],
        priceStart: "",
        priceEnd: "",
      };
      // if(this.gameId == gameId){
      //   return
      // }
      this.loading = true;
      // this.gameId = gameId
      await this.getGameList(gameId);
    },
    // tabs切换时触发
    tabChange(item, init) {
      this.gameId = item.id;
      this.form.gameId = item.id;
      this.form.gameType = item.type;
      this.GameSelectedType = item.type;
      this.form.gameName = item.name;

      this.getAttrList();
      // this.getConfigByGame()
      this.loading = false;
    },
    // 游戏列表
    async getGameList(gameId) {
      let res = await gameListApi.getGameList();
      this.gameList = res.rows;
      if (res.rows && res.rows.length) {
        if (gameId) {
          res.rows.forEach((r) => {
            if (r.id == gameId) {
              this.tabChange(r);
            }
          });
        } else {
          this.tabChange(res.rows[0]);
        }
      }
    },

    // 获取系统列表
    getSysList() {
      gameDictionaryApi
        .getChildList({
          gameId: this.form.gameId,
          systemKey: "system",
        })
        .then((res) => {
          this.sysList = res.rows;
        });
    },
    // 获取运营商列表
    getYysList(init, init2) {
      gameDictionaryApi
        .getChildList({
          gameId: this.form.gameId,
          systemKey: "carrier",
        })
        .then((res) => {
          this.carrierList = res.rows;
          // if(init){
          //   this.getAreaList(init,init2)
          // }
        });
    },
    //端游 直接获取大区
    getAreaList2(init) {
      let obj = {
        gameId: this.form.gameId,
        systemKey: "group",
      };
      gameDictionaryApi.getChildList(obj).then((res) => {
        this.areaList = res.rows;
        // if(init){
        //   this.getServiceList(init)
        // }
      });
    },
    // 获取已配置的项
    getConfigByGame() {
      if (this.config) {
        Object.assign(this.form, JSON.parse(this.config));
      }
      if (this.GameSelectedType === 0) {
        // 手游
        // 获取系统列表和运营商列表
        this.getSysList();
        this.getYysList();
      } else {
        // 端游
        // 获取大区列表
        this.getAreaList2();
      }
    },
    // 获取游戏属性列表
    getAttrList() {
      this.loading = true;
      gameConfigApi.getGameConfig({ gameId: this.form.gameId }).then((res) => {
        this.loading = false;
        if (res.code == 200) {
          let attrs = res.rows;
          const tempArr = [];
          if (attrs.length) {
            attrs.forEach((r) => {
              if (r.fieldType == "checkbox" && r.isEnable == "0") {
                this.$set(this.form, r.aavName + "rander", []);
                this.$set(this.form, r.aavName, "");
              } else if (r.fieldType == "date" && r.isEnable == "0") {
                this.$set(this.form, r.aavName + "temp", []);
                this.$set(this.form, r.aavName, "");
              } else if (r.fieldType == "number" && r.isEnable == "0") {
                this.$set(this.form, r.aavName + "start", undefined);
                this.$set(this.form, r.aavName + "end", undefined);
                this.$set(this.form, r.aavName, "");
                tempArr.push(r);
              } else if (r.fieldType == "radio" && r.isEnable == "0") {
                this.$set(this.form, r.aavName + "rander", []);
                this.$set(this.form, r.aavName, "");
                tempArr.push(r);
              } else if (r.isEnable == "0") {
                this.$set(this.form, r.aavName, "");
              }
            });
          }
          this.attrs = JSON.parse(JSON.stringify(tempArr));
          this.getConfigByGame(this.form.gameId);
          console.log("%c Line:238 🥔 this.attrs", "color:#3f7cff", this.attrs);
        }
      });
    },
    // 多选项改变
    checkboxChange(e, key) {
      // console.log("%c Line:474 🍊 e", "color:#6ec1c2", e);
      if (e && e.length) {
        this.form[key] = e.join(",");
      } else {
        this.form[key] = "";
      }
    },
    // 日期选择改变
    dateChange(e, key) {
      if (e && e.length == 2) {
        this.form[key] = e[0] + "===" + e[1];
      } else {
        this.form[key] = "";
      }
    },
    // 重置
    reset() {
      this.resetForm();
    },
    submitForm(formName) {
      // 将自定义字段的多选项转成字符串
      if (this.attrs.length) {
        this.attrs.forEach((r) => {
          // 将数字类型的字段拼接成 xx===xx 的形式
          if (r.fieldType == "number") {
            let sta = this.form[r.aavName + "start"] || "";
            let end = this.form[r.aavName + "end"] || "";
            if (sta || end) {
              this.form[r.aavName] = sta + "===" + end;
            } else {
              this.form[r.aavName] = "";
            }
          }
          if (r.fieldType == "radio") {
            this.form[r.aavName] = this.form[r.aavName+'rander'].join(',')
          }
        });
      }
      let obj = {
        gameId: this.form.gameId,
        content: JSON.stringify(this.form),
      };
      this.$emit("change", obj);
      this.close();
    },
    close() {
      this.attrs = "";
      this.form = {};
      this.dialogVisible = false;
    },
    resetForm() {
      this.$refs["form"].resetFields();
    },
  },
};
</script>
<style scoped lang="scss">
.tip {
  color: #999;
  margin-bottom: 15px;
}
.center {
  width: 100%;
  background: #fff;
  padding: 10px 0;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 99;
}

/* 自定义游戏选择组件 */
.tab-box {
  width: calc(100% - 60px);
  overflow-y: auto;
  position: absolute;
  top: 0;
  left: 20px;
  background-color: #fff;
  z-index: 99;
  // border: 1px solid #88a6ff;
  // border-radius: 10px;
  padding: 10px 0;
  .tab-cont {
    flex-wrap: nowrap;
  }
  .tab {
    padding: 3px 10px;
    flex-shrink: 0;
    border-radius: 3px;
    border: 1px solid #ccc;
    margin-right: 10px;
    cursor: pointer;
    &.active {
      background-color: #409eff;
      border-color: #409eff;
      color: #fff;
    }
  }
}

.demo-ruleForm {
  padding: 0 15px;
}
::v-deep .el-checkbox {
  width: 170px;
}

::v-deep .form-box .el-input {
  width: 250px;
}

::v-deep .form-box .lattle-input .el-input {
  width: 170px;
}

::v-deep .form-box .lattle-input2 .el-input {
  width: 110px;
}

::v-deep .form-box .big-input .el-input {
  width: 100%;
}

::v-deep .form-box .el-form-item__content {
  max-width: 1003px;
}
::v-deep .form-box .number-input .el-input--medium {
  width: 100px;
}
::v-deep .el-input-number--medium {
  width: 100px;
}
.number-input {
  width: 250px;
  display: flex;
}

/* 设置滚动条的宽度为10px，并且颜色为红色 */
.tab-box::-webkit-scrollbar {
  width: 10px;
}

/* 设置滚动条滑块的颜色为绿色 */
.tab-box::-webkit-scrollbar-thumb {
  background-color: #5982ffa8;
  border-radius: 10px;
}

/* 设置滚动条轨道的颜色为蓝色 */
.tab-box::-webkit-scrollbar-track {
  background-color: #5982ff2d;
  border-radius: 10px;
}
</style>
